<template>
	<div>
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px">
			<div class="content">
				<div class="list shadow_primary">
	                <label class="item item-input">
	                    <span class="input-label">原密码：</span>
	                    <input type="password" v-model="obj.oldPwd" placeholder="请输入原密码">
	                </label>
	                <label class="item item-input">
	                    <span class="input-label">新密码：</span>
	                    <input type="password" v-model="obj.newPwd1" placeholder="请输入6-16位字母、数字">
	                </label>
	                <label class="item item-input">
	                    <span class="input-label">确认新密码：</span>
	                    <input type="password" v-model="obj.newPwd2" placeholder="请确认新密码">
	                </label>
	            </div>
	            <a class="btn_block" @click="reset()">保存</a>
	        </div>
		</scroll>
	</div>
</template>
<style lang="less" scoped>
	.content {
		position: relative;
		top: 44px;
		left: 0;
		.list {
		    margin: 12px 0 24px 0;
		    background-color: #fff;
		}
		& label {
		    padding-top: 5px;
		    padding-bottom: 5px;
		    margin: 0 16px;
		    & .input-label {
			    position: relative;
			    left: 1px;
			    letter-spacing: 1px;
			    width: 100px;
			    font-size: 14px;
			    display: table;
			    padding: 7px 10px 7px 0;
			    max-width: 200px;
			    color: #444;
			}
			& input {
			    padding: 0;
			    font-size: 12px;
			    color: #666;
			    display: block;
			    height: 34px;
			    line-height: 16px;
			    width: 100%;
			    &::-webkit-input-placeholder {
			        color: #999;
				}
				&::-moz-placeholder {
			        color: #999;
				}
				&::-ms-input-placeholder {
			        color: #999;
				}
			}
		}
		& .item {
			font-size: 16px;
		}
		& .item-input{
			align-items: center;
		    position: relative;
		    overflow: hidden;
		    padding: 6px 0 5px 0;
		    display: flex;
		    &:not(:last-child) {
			    border-bottom: 1px solid #eee;
			}
		}
		& .btn_block {
		    border-radius: 5px;
		    height: 36px;
		    background-color: #4c5b71;
		    font-size: 14px;
		    margin: 0 14px;
		    display: block;
		    box-sizing: border-box;
    		color: #fff;
    		text-align: center;
    		line-height: 36px;
		}
	}

</style>
<script>
	import apiService from "@/api/homepage.js";
	import crypto from 'crypto';
	import verify from "@/utils/verify.js";
	import Toast from '@/components/toast.js';
	export default {
		components: {
        },
        data() {
        	return {
	        	headers: {
	                title:'修改密码',
	                skip:'',
	            },
	            verify: verify,
	            obj: {
	            	oldPwd: "",
	            	newPwd1: "",
	            	newPwd2: ""
	            },
	        }
        },
        methods: {
            back(){
                this.$router.go(-1)
            },
            md5(str) {
            	var md5=crypto.createHash('md5');
        		md5.update(str);
        		var pw = md5.digest('hex');
        		return pw;
            },
            reset(){
            	let _this = this;
            	if(_this.obj.newPwd1 != _this.obj.newPwd2) {
            		Toast("前后密码输入不一致");
            		return false;
            	}
            	if(_this.obj.newPwd1.length < 6) {
            		Toast("输入的密码长度必须大于6位");
            		return false;
            	}
            	let params={
            		"password": _this.md5(_this.obj.newPwd2),
					"oldPassword": _this.md5(_this.obj.oldPwd)
            	}
            	apiService.resetPwd(params).then(resp => {
            		if(resp.code == 200) {
            			_this.$router.push({path: '/login'})
            		} else {
            			Toast(resp.message);
            		}
            	})
            },
            pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        },

	}
</script>